<template>
	<view v-if="isShow" :class="classStr" :style="styleStr">
		<view class="user-avatar">
			<image src="@/static/logo.png" mode="aspectFill"></image>
		</view>
		<view class="text">
			<view class="user-name text-ellipsis">111 111111111111111111111111111111</view>
			<view class="msg text-ellipsis">111111111111111111111111111111111111111111111111111111 </view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import useStatusHeight from '@/hooks/useStatusHeight';
	const statusHeight = useStatusHeight(); // 状态栏高度，用于计算toast距离顶部的距离
	const isShow = ref(true); // 控制toast显示与隐藏的变量
	const classStr = ref("im-portant-toast");
	const styleStr = ref("");
	const show = () => {
		isShow.value = true; // 显示toast
		setTimeout(() => {

		}, 2000)
	}
</script>

<style lang="scss" scoped>
	.im-portant-toast {
		position: fixed;
		top: 0;
		left: 24rpx;
		width: calc(100% - 24rpx - 24rpx - 24rpx - 24rpx);
		border-radius: 15rpx;
		z-index: 999;
		background-color: #FFF;
		padding: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between; // 添加这个属性，使文字和头像分列左右两边

		.user-avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.text {
			width: calc(100% - 80rpx - 20rpx);

			.user-name {
				font-size: 28rpx;
				font-weight: bolder;
			}

			.msg {
				font-size: 26rpx;
			}
		}
	}
</style>